<template>
    <div :id="chartsId" :style="{width: '900px', height: '700px'}" class="my-chart"></div>
</template>

<script>
require('echarts/map/js/china');
export default {
  props: ['chartsId', 'data', 'val', 'name', 'children'],
  data(){
      return {
				base: [
				{name: '北京',value: 0 },
				{name: '天津',value: 0 },
				{name: '上海',value: 0 },
				{name: '重庆',value: 0 },
				{name: '河北',value: 0 },
				{name: '河南',value: 0 },
				{name: '云南',value: 0 },
				{name: '辽宁',value: 0 },
				{name: '黑龙江',value: 0 },
				{name: '湖南',value: 0 },
				{name: '安徽',value: 0 },
				{name: '山东',value: 0 },
				{name: '新疆',value: 0 },
				{name: '江苏',value: 0 },
				{name: '浙江',value: 0 },
				{name: '江西',value: 0 },
				{name: '湖北',value: 0 },
				{name: '广西',value: 0 },
				{name: '甘肃',value: 0 },
				{name: '山西',value: 0 },
				{name: '内蒙古',value: 0 },
				{name: '陕西',value: 0 },
				{name: '吉林',value: 0 },
				{name: '福建',value: 0 },
				{name: '贵州',value: 0 },
				{name: '广东',value: 0 },
				{name: '青海',value: 0 },
				{name: '西藏',value: 0 },
				{name: '四川',value: 0 },
				{name: '宁夏',value: 0 },
				{name: '河北',value: 0 },
				{name: '台湾',value: 0 },
				{name: '香港',value: 0 },
				{name: '澳门',value: 0 },
				],
				benpin: [],
				jingpin1: [],
				jingpin2: [],
				jingpin3: [],
				jingpin4: [],
			}
  },
  mounted(){
      this.desc();
  },
  watch: {
      data(){
				  let self = this;
					let val = this.val;
					
					let data = this.data;
					
					let name1 = this.name;
					
					let productId;//obj的name
          for(let i = 0; i  < val.length; i++){
						let base1 = [
							{name: '北京',value: 0 },
							{name: '天津',value: 0 },
							{name: '上海',value: 0 },
							{name: '重庆',value: 0 },
							{name: '河北',value: 0 },
							{name: '河南',value: 0 },
							{name: '云南',value: 0 },
							{name: '辽宁',value: 0 },
							{name: '黑龙江',value: 0 },
							{name: '湖南',value: 0 },
							{name: '安徽',value: 0 },
							{name: '山东',value: 0 },
							{name: '新疆',value: 0 },
							{name: '江苏',value: 0 },
							{name: '浙江',value: 0 },
							{name: '江西',value: 0 },
							{name: '湖北',value: 0 },
							{name: '广西',value: 0 },
							{name: '甘肃',value: 0 },
							{name: '山西',value: 0 },
							{name: '内蒙古',value: 0 },
							{name: '陕西',value: 0 },
							{name: '吉林',value: 0 },
							{name: '福建',value: 0 },
							{name: '贵州',value: 0 },
							{name: '广东',value: 0 },
							{name: '青海',value: 0 },
							{name: '西藏',value: 0 },
							{name: '四川',value: 0 },
							{name: '宁夏',value: 0 },
							{name: '河北',value: 0 },
							{name: '台湾',value: 0 },
							{name: '香港',value: 0 },
							{name: '澳门',value: 0 },
							];
						if(i == 0) productId = 'no_discount_benpin_' + val[0];
						else productId = 'no_discounts_jingpin_' + val[i];
						let discount1 = data[productId].btzc;
						let discount2 = data[productId].bxsfzc;
						let discount3 = data[productId].byzc;
						let discount4 = data[productId].jrzc;
						let discount5 = data[productId].libao;
						let discount6 = data[productId].zhzc;
						base1.forEach(function(o,d){
							discount1.forEach(function(t, y){
								if(o.name == t.name){
									o.value = o.value + t.value
								}
							});
						});
						base1.forEach(function(o,d){
							discount2.forEach(function(t, y){
								if(o.name == t.name){
									o.value = o.value + t.value
								}
							});
						});
						base1.forEach(function(o,d){
							discount3.forEach(function(t, y){
								if(o.name == t.name){
									o.value = o.value + t.value
								}
							});
						});
						base1.forEach(function(o,d){
							discount4.forEach(function(t, y){
								if(o.name == t.name){
									o.value = o.value + t.value
								}
							});
						});
						base1.forEach(function(o,d){
							discount5.forEach(function(t, y){
								if(o.name == t.name){
									o.value = o.value + t.value
								}
							});
						});
						base1.forEach(function(o,d){
							discount6.forEach(function(t, y){
								if(o.name == t.name){
									o.value = o.value + t.value
								}
							});
						});
						if(i = 0) this.benpin = base1;
						if(i = 1) this.jingpin1 = base1;
						if(i = 2) this.jingpin2 = base1;
						if(i = 3) this.jingpin3 = base1;
						if(i = 4) this.jingpin4 = base1;
					}
          let myChart4 = this.$echarts.init(document.getElementById(this.chartsId));
          myChart4.setOption({
						visualMap: {
							max: function(){
								let first = 'no_discount_benpin_' + val[0];
								let item = data[first];
								let flag = data[first].length;
								if (flag == 0){
									first = 'no_discounts_jingpin_' + val[1];
									item = data[first];
									flag = data[first].length;
								}
								if (flag == 0){
									first = 'no_discounts_jingpin_' + val[2];
									item = data[first];
									flag = data[first].length;
								}
								if (flag == 0){
									first = 'no_discounts_jingpin_' + val[3];
									item = data[first];
									flag = data[first].length;
								}
								if (flag == 0){
									first = 'no_discounts_jingpin_' + val[4];
									item = data[first];
									flag = data[first].length;
								}
								let base = self.base;
								let discount1 = item.btzc;
								let discount2 = item.bxsfzc;
								let discount3 = item.byzc;
								let discount4 = item.jrzc;
								let discount5 = item.libao;
								let discount6 = item.zhzc;
								base.forEach(function(o,d){
									discount1.forEach(function(t, y){
										if(o.name == t.name){
											o.value = o.value + t.value
										}
									});
								});
								base.forEach(function(o,d){
									discount2.forEach(function(t, y){
										if(o.name == t.name){
											o.value = o.value + t.value
										}
									});
								});
								base.forEach(function(o,d){
									discount3.forEach(function(t, y){
										if(o.name == t.name){
											o.value = o.value + t.value
										}
									});
								});
								base.forEach(function(o,d){
									discount4.forEach(function(t, y){
										if(o.name == t.name){
											o.value = o.value + t.value
										}
									});
								});
								base.forEach(function(o,d){
									discount5.forEach(function(t, y){
										if(o.name == t.name){
											o.value = o.value + t.value
										}
									});
								});
								base.forEach(function(o,d){
									discount6.forEach(function(t, y){
										if(o.name == t.name){
											o.value = o.value + t.value
										}
									});
								});
								base.sort(compare('value'));
								function compare(prop){
									return function(a,b){
										var value1 = a[prop];
										var value2 = b[prop];
										return value2 - value1;
									}
								}
								return base[0].value;
							}()
						},
						legend: {
								data: function(){
									let list = [];
									for(let i = 0; i < val.length; i++){
										let item = name1[i];
										list.push(item);
									}
									
									return list;
								}(),
								selected: function(){
									let obj = {};
									for(let i = 0; i < val.length; i++){
										obj[name1[i]] = false;
										if(i == 0) obj[name1[i]] = true;
									}
									return obj;
								}(),
            },
						series: function(){
							let arr = [];
							for(let i = 0; i < val.length; i++){
								let obj = {};
								obj.name = name1[i];
								obj.stack = 'a' + i;
								if(i == 0) {
									console.log('self.benpin: ', self.benpin);
									obj.data = self.benpin;
								}
								if(i == 1) {
									console.log('self.jingpin1: ', self.jingpin1);
									for(let i = 0; i < self.jingpin1.length; i++){
										if(self.jingpin1[i].value === -1) self.jingpin1[i].value = '--';
									}
									obj.data = self.jingpin1;
								}
								if(i == 2) {
									for(let i = 0; i < self.jingpin2.length; i++){
										if(self.jingpin2[i].value === -1) self.jingpin2[i].value = '--';
									}
									obj.data = self.jingpin2;
								}
								if(i == 3) {
									for(let i = 0; i < self.jingpin3.length; i++){
										if(self.jingpin3[i].value === -1) self.jingpin3[i].value = '--';
									}
									obj.data = self.jingpin3;
								}
								if(i == 4) {
									for(let i = 0; i < self.jingpin4.length; i++){
										if(self.jingpin4[i].value === -1) self.jingpin4[i].value = '--';
									}
									obj.data = self.jingpin4;
								}
								
								
								obj.type = 'map';
								obj.mapType = 'china';
								obj.roam = false;
								obj.label = {
									normal: {
											show: true
									},
									emphasis: {
											show: true
									}
								};
								obj.itemStyle = {
									emphasis: {
											areaColor: '#389BB7'
									}
								};
								arr.push(obj);
							}
							return arr;
						}()
					})
      }
  },
  methods:{
      desc(){
				let self = this;
        let myChart4 = this.$echarts.init(document.getElementById(this.chartsId));
        function randomData() {
            return Math.round(Math.random()*1000);
        }

        myChart4.setOption({
            title: {
                text: '非价格优惠地图',
                left: 'center'
            },
            tooltip : {
								trigger: 'item',
								//鼠标hover显示内容
								formatter:function(params){
										return params.seriesName + '<br/>' + params.name + ' : ' + params.value + '个';
								}
						},
            legend: {
                orient: 'horizontal',
                left: 'left',
                data:['本品','竞品1', '竞品2'],
                selected: {
                    '本品': true,
                    '竞品1': false,
                    '竞品2': false
								}
            },
            visualMap: {
                min: 0,
                max: 2500,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],           // 文本，默认为数值文本
                calculable: true,
                inRange: {
                    color: ['#eee', '#6ba7e4'],
                },
                outOfRange: {
                    color: '#333'
                },
                controller: {
                    inRange:{}
                }
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: '本品',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    stack: 'a1',
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            areaColor: '#389BB7'
                        }
                    },
                    data:[
                        {name: '北京',value: randomData() },
                        {name: '天津',value: randomData() },
                        {name: '上海',value: randomData() },
                        {name: '重庆',value: randomData() },
                        {name: '河北',value: randomData() },
                        {name: '河南',value: randomData() },
                        {name: '云南',value: randomData() },
                        {name: '辽宁',value: randomData() },
                        {name: '黑龙江',value: randomData() },
                        {name: '湖南',value: randomData() },
                        {name: '安徽',value: randomData() },
                        {name: '山东',value: randomData() },
                        {name: '新疆',value: randomData() },
                        {name: '江苏',value: randomData() },
                        {name: '浙江',value: randomData() },
                        {name: '江西',value: randomData() },
                        {name: '湖北',value: randomData() },
                        {name: '广西',value: randomData() },
                        {name: '甘肃',value: randomData() },
                        {name: '山西',value: randomData() },
                        {name: '内蒙古',value: randomData() },
                        {name: '陕西',value: randomData() },
                        {name: '吉林',value: randomData() },
                        {name: '福建',value: randomData() },
                        {name: '贵州',value: randomData() },
                        {name: '广东',value: randomData() },
                        {name: '青海',value: randomData() },
                        {name: '西藏',value: randomData() },
                        {name: '四川',value: randomData() },
                        {name: '宁夏',value: randomData() },
                        {name: '河北',value: randomData() },
                        {name: '台湾',value: randomData() },
                        {name: '香港',value: randomData() },
                        {name: '澳门',value: randomData() }
                    ]
                },
                {
                    name: '竞品1',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    stack: 'a2',
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            areaColor: '#389BB7'
                        }
                    },
                    data:[
                        {name: '北京',value: randomData() },
                        {name: '天津',value: randomData() },
                        {name: '上海',value: randomData() },
                        {name: '重庆',value: randomData() },
                        {name: '河北',value: randomData() },
                        {name: '河南',value: randomData() },
                        {name: '云南',value: randomData() },
                        {name: '辽宁',value: randomData() },
                        {name: '黑龙江',value: randomData() },
                        {name: '湖南',value: randomData() },
                        {name: '安徽',value: randomData() },
                        {name: '山东',value: randomData() },
                        {name: '新疆',value: randomData() },
                        {name: '江苏',value: randomData() },
                        {name: '浙江',value: randomData() },
                        {name: '江西',value: randomData() },
                        {name: '湖北',value: randomData() },
                        {name: '广西',value: randomData() },
                        {name: '甘肃',value: randomData() },
                        {name: '山西',value: randomData() },
                        {name: '内蒙古',value: randomData() },
                        {name: '陕西',value: randomData() },
                        {name: '吉林',value: randomData() },
                        {name: '福建',value: randomData() },
                        {name: '贵州',value: randomData() },
                        {name: '广东',value: randomData() },
                        {name: '青海',value: randomData() },
                        {name: '西藏',value: randomData() },
                        {name: '四川',value: randomData() },
                        {name: '宁夏',value: randomData() },
                        {name: '河北',value: randomData() },
                        {name: '台湾',value: randomData() },
                        {name: '香港',value: randomData() },
                        {name: '澳门',value: randomData() }
                    ]
                },
                {
                    name: '竞品2',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    stack: 'a2',
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            areaColor: '#389BB7'
                        }
                    },
                    data:[
                        {name: '北京',value: randomData() },
                        {name: '天津',value: randomData() },
                        {name: '上海',value: randomData() },
                        {name: '重庆',value: randomData() },
                        {name: '河北',value: randomData() },
                        {name: '河南',value: randomData() },
                        {name: '云南',value: randomData() },
                        {name: '辽宁',value: randomData() },
                        {name: '黑龙江',value: randomData() },
                        {name: '湖南',value: randomData() },
                        {name: '安徽',value: randomData() },
                        {name: '山东',value: randomData() },
                        {name: '新疆',value: randomData() },
                        {name: '江苏',value: randomData() },
                        {name: '浙江',value: randomData() },
                        {name: '江西',value: randomData() },
                        {name: '湖北',value: randomData() },
                        {name: '广西',value: randomData() },
                        {name: '甘肃',value: randomData() },
                        {name: '山西',value: randomData() },
                        {name: '内蒙古',value: randomData() },
                        {name: '陕西',value: randomData() },
                        {name: '吉林',value: randomData() },
                        {name: '福建',value: randomData() },
                        {name: '贵州',value: randomData() },
                        {name: '广东',value: randomData() },
                        {name: '青海',value: randomData() },
                        {name: '西藏',value: randomData() },
                        {name: '四川',value: randomData() },
                        {name: '宁夏',value: randomData() },
                        {name: '河北',value: randomData() },
                        {name: '台湾',value: randomData() },
                        {name: '香港',value: randomData() },
                        {name: '澳门',value: randomData() }
                    ]
                }
            ]
        })
        myChart4.on('legendselectchanged', function(obj) {
            var selected = obj.selected;
            var legend = obj.name;
            
            for(var i in selected){
                if(i == legend){
                    selected[i] = true;
                }else{
                    selected[i] = false;
                }
            }
            myChart4.setOption({
                legend:{
                    selected: selected
                }
            })
        });
        myChart4.on('click', function(params){
					let name = params.name;
					let seriesName = params.seriesName;
					let varName;//变量名
					for(let i = 0; i < self.val.length; i++){
						if(self.name[i] == seriesName){
							if(i == 0) varName = 'no_discount_benpin_' + self.val[0];
							else varName = 'no_discounts_jingpin_' + self.val[i]
						}
					}
					let btzc = self.data[varName].btzc;
					let bxsfzc = self.data[varName].bxsfzc;
					let byzc = self.data[varName].byzc;
					let jrzc = self.data[varName].jrzc;
					let libao = self.data[varName].libao;
					let zhzc = self.data[varName].zhzc;
					let btzcVal = 0;
					let bxsfzcVal = 0;
					let byzcVal = 0;
					let jrzcVal = 0;
					let libaoVal = 0;
					let zhzcVal = 0;
					btzc.forEach(function(o,d){
						if(o.name == name){
							btzcVal = o.value;
						}
					});
					bxsfzc.forEach(function(o,d){
						if(o.name == name){
							bxsfzcVal = o.value;
						}
					});
					byzc.forEach(function(o,d){
						if(o.name == name){
							byzcVal = o.value;
						}
					});
					jrzc.forEach(function(o,d){
						if(o.name == name){
							jrzcVal = o.value;
						}
					});
					libao.forEach(function(o,d){
						if(o.name == name){
							libaoVal = o.value;
						}
					});
					zhzc.forEach(function(o,d){
						if(o.name == name){
							zhzcVal = o.value;
						}
					});
					let arr = [];
					arr.push(name);
					arr.push(seriesName);
					arr.push(btzcVal);
					arr.push(bxsfzcVal);
					arr.push(byzcVal);
					arr.push(jrzcVal);
					arr.push(libaoVal);
					arr.push(zhzcVal);
					self.$emit('forNoPrice', arr)
      })
      }
  }
}
</script>
